<template>
	<view class="register-view">
		<view class="logo">
			<image src="@/static/icon/image_60.png" mode="" class="register-image"></image>
		</view>

		<view class="input-all">
			<input type="text" placeholder="邮箱/手机号" class="mobile-email">
			<input type="text" placeholder="请输入验证码" class="password">
			<view class="ver-code">
				获取验证码
			</view>
			<view class="warning" v-if="isRegister">
				<image src="@/static/icon/image_20.png" alt=""></image>
				当前手机号已注册，请直接登录
			</view>

			<view class="warning" v-if="isRead">
				<image src="@/static/icon/image_20.png" alt=""></image>
				请阅读并勾选协议后进行注册
			</view>
			<view class="vercode-err" v-if="isVerCode">
				<image src="@/static/icon/image_20.png" class="ver-img" alt=""></image>
				验证码错误
			</view>
		</view>

		<view class="register-but">
			注册
		</view>

		<view class="login-hint">
			已有账号？去<navigator url="/pages/login/login" class="go-login">登录</navigator>
		</view>

		<view class="user-terms">
			<image class="confirm" src="../../static/icon/image_72.png" @click="pitchOn = !pitchOn" v-show="!pitchOn">
			</image>
			<image class="not-confirm" src="../../static/icon/image_71.png" @click="pitchOn = !pitchOn" v-show="pitchOn">
			</image>
			<text class="read">已仔细阅读并同意<navigator url="/pages/userTerms/userTerms">《用户条款》</navigator></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pitchOn: false,
				isRegister: false,
				isRead: false,
				isVerCode: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register-view {
		// height: 100%;
		padding: 0 48rpx;
		position: relative;
	}

	.logo {
		text-align: center;

		.register-image {
			margin-top: 149rpx;
			width: 170rpx;
			height: 170rpx;
		}
	}

	.input-all {
		margin-top: 99.6rpx;
		position: relative;

		.mobile-email {
			width: 100%;
			height: 56rpx;
			border-bottom: 2rpx solid #858585;
			padding: 8rpx 0;
		}

		.mobile-email::placeholder {
			color: #858585;
			font-family: PingFang SC;
			font-weight: regular;
			font-size: 30rpx;
			line-height: 40rpx;
			letter-spacing: 0rpx;
			text-align: left;
		}

		.password {
			width: 100%;
			height: 56rpx;
			border-bottom: 2rpx solid #858585;
			margin-top: 48rpx;
			padding: 8rpx 0;
		}

		.password::placeholder {
			color: #858585;
			font-family: PingFang SC;
			font-weight: regular;
			font-size: 30rpx;
			line-height: 40rpx;
			letter-spacing: 0rpx;
			text-align: left;

		}

		.ver-code {
			width: 194rpx;
			height: 56rpx;
			border-radius: 96rpx;
			background: #F1F1F1;
			text-align: center;
			line-height: 56rpx;
			color: #858585;
			font-size: 26rpx;
			position: absolute;
			top: 124rpx;
			right: 0;
		}

		.warning {
			text-align: center;
			line-height: 80rpx;
			height: 80rpx;
			width: 100%;
			border-radius: 20rpx;
			background: #F8F8F8;
			box-shadow: 0rpx 4rpx 8rpx 0rpx #0000003F;
			color: #FF0000;
			font-family: PingFang SC;
			font-weight: regular;
			font-size: 28rpx;
			letter-spacing: 0rpx;
			position: absolute;
			top: 53rpx;

			img {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
				margin-right: 20rpx;
			}
		}

		.vercode-err {
			color: #F44141;
			font-family: PingFang SC;
			font-weight: regular;
			font-size: 26rpx;
			letter-spacing: 0rpx;
			text-align: left;
			display: flex;
			align-items: center;
			margin-top: 12rpx;
		}
	}

	.ver-img {
		width: 26rpx;
		height: 26rpx;
		margin-right: 18rpx;
	}

	.register-but {
		height: 80rpx;
		width: 100%;
		border-radius: 20rpx;
		background: #000000;
		color: #FFFFFF;
		font-family: PingFang SC;
		font-weight: semibold;
		font-size: 28rpx;
		line-height: 80rpx;
		text-align: center;
		margin-top: 80rpx;
	}

	navigator {
		display: inline;
		font-size: 30rpx;
		color: #ff8f2b;
		border-bottom: 2rpx solid #ff8f2b;
	}

	.login-hint {
		height: 40rpx;
		color: #858585;
		font-family: PingFang SC;
		font-weight: regular;
		font-size: 30rpx;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		text-align: center;
		margin-top: 32rpx;
	}

	.user-terms {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40rpx;
		text-align: center;
		margin-top: 650rpx;
		position: relative;
	}

	.confirm {
		width: 32rpx;
		height: 32rpx;
		margin-left: 100rpx;
	}

	.not-confirm {
		width: 32rpx;
		height: 32rpx;
		margin-left: 100rpx;
	}

	.read {
		color: #858585;
		font-family: PingFang SC;
		font-weight: regular;
		font-size: 30rpx;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		text-align: left;
		flex: 1;
		margin-left: 20rpx;
	}
</style>
